import React, { memo } from "react"
import type { ReactNode } from "react"
import { formatImageUrl } from "@/utils/format"
import type { Album } from "@/views/Discover/c-views/Recommend/api/type"
import "./index.less"
interface Iprops {
	children?: ReactNode
	data: Album
}
const AlbumItem: React.FC<Iprops> = (props) => {
	const { data } = props
	return (
		<div className="albumItemContainer">
			<div className="top">
				<img src={formatImageUrl(data?.picUrl, 100)} alt="" />
				<div className="mask"></div>
				<div className="sprite_icon play"></div>
			</div>
			<div className="bot">
				<div className="name single">{data?.name}</div>
				<div className="singer single">{data?.artist?.name}</div>
			</div>
		</div>
	)
}
export default memo(AlbumItem)
